<!--
- Author:  LiShibin.
- Date:    2017/7/4 0004.
- File:    my.
-->
<template>
  <div class="Web_Box">
    <div class="Topmenu"><i @click="back" class="iconfont icon-youjiantou"><a href=""></a></i>
      <h1>余额提现</h1>
      <span></span>
    </div>
    <div class="yuetixian_top" @click="gotoMemberWithdrawal">
      <p class="yuetixian_top_p"><span>￥</span>{{memberInfo.balance}}</p>
      <p><span class="yuetixian_top_span">提现</span></p>
    </div>
    <div class="yuetixian_biaoti">
      <p>余额明细
        <i class="iconfont icon-more"></i>
        <span class="yuetixian_biaoti_right">查看全部</span></p>
    </div>
    <div class="yuetixian_mingxi"
      v-infinite-scroll="loadMoreGoods"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <ul>
        <li v-for="item in logs.data">
          <p><span class="yuetixian_mingxi_lt">{{item.withdrawals_amount}}</span><span class="yuetixian_mingxi_right">{{item.state}}</span> </p>
          <p>申请提现 <span class="yuetixian_mingxi_right">{{item.add_time | timestampToDate('yyyy.MM.dd hh:mm')}}</span> </p>
        </li>
      </ul>
    </div>
    <loading-more :allLoaded="logs.allLoaded" :show="logs.data.length > 0"></loading-more>
    <empty-data :show="logs.allLoaded && logs.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: 'memberInfo'})
    ],
    beforeRouteEnter (to, from, next) {
      next()
    },
    data() {
      return {
        from: this.$route.query.from || '',
        logs: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        withdrawalLog: [] // 提现记录
      }
    },
    created() {
      this.getWithdrawalLog(this.logs.page, this.logs.pageSize)
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      gotoMemberWithdrawal() {
        this.$router.push({name: 'member-withdrawal'})
      },
      getWithdrawalLog(page, pageSize) {
        this.logs.loading = true
        this.$request.getWithdrawalLog(page, pageSize).then(data => {
          if (data.length < this.logs.pageSize) {
            this.logs.allLoaded = true
          }
          this.logs.data = [...this.logs.data, ...data]
        }).finally(() => {
          this.logs.requested = true
          this.logs.loading = false
        })
      },
      loadMoreGoods() {
        if (this.logs.loading || this.logs.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getWithdrawalLog(++this.logs.page, this.logs.pageSize)
        }, 500)
      }
    }
  }
</script>